<template>
	<div>
		<head-page title="4001-1921-7-1" id="backstyle"></head-page>
		<!-- 注册页面 -->
		<div class="head">
			<img src="../../assets/logo.png" alt="" />
			<span>欢迎注册云商盟</span>
		</div>

		<!-- Form 表单 -->
		<van-form @submit="onSubmit">
			<van-field
				v-model="username"
				name="userName"
				label="用户名称"
				maxlength="20"
				placeholder="请输入用户名称"
				:rules="[{ required: true, message: '请输入用户名称' }]"
			/>
			<van-field
				v-model="phone"
				name="userTel"
				label="手机号"
				placeholder="手机号"
				:rules="[
					{ required: true, message: '请填写您的手机号码！' },
					{
						pattern: /^1[3456789]\d{9}$/,
						message: '手机号码格式错误！',
					},
				]"
			/>
			<van-field
				v-model="password"
				:type="oldIcon ? 'text' : 'password'"
				name="userPass"
				label="密码"
				placeholder="密码"
				:right-icon="oldIcon ? 'eye-o' : 'eye'"
				@click-right-icon="showOld"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>
			<van-field
				v-model="password2"
				:type="newIcon ? 'text' : 'password'"
				name="password"
				label="确认密码"
				placeholder="请再次输入密码"
				:right-icon="newIcon ? 'eye-o' : 'eye'"
				@click-right-icon="showNew"
				maxlength="30"
				:rules="[
					{ required: true, message: '请再次输入密码' },
					{ validator, message: '两次密码不一致，请重新输入' },
				]"
			/>
			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>注册</van-button
				>
			</div>
		</van-form>
	</div>
</template>
  
  <script>
// 用请求，先引用请求
// 引入rant Notify 消息提示   
import { Notify, Dialog, Toast } from "vant"
import { addUser, login } from "@/api/login"
export default {
	data() {
		return {
			username: '',
			phone: '',
			password: '',
			password2: '',
			oldIcon: false,
			newIcon: false,
		}
	},
	methods: {
		// 密码图标点击
		showOld() {
			this.oldIcon = !this.oldIcon
		},
		// 密码图标点击
		showNew() {
			this.newIcon = !this.newIcon
		},
		onSubmit(values) {
			const that = this
			delete values.password
			addUser(values).then((res) => {
				if (res.data.code == 200) {
					Toast.loading({
						message: '注册成功，登录中...',
						forbidClick: true,
					})
					setTimeout(() => {
						that.logined()
					}, 1000)
				}
			})
		},
		logined() {
			login(this.phone, this.password).then((res) => {
				if (res.data.code == 200) {
					Toast({
						message: '登录中成功',
						icon: 'success',
					})
					sessionStorage.setItem("token", res.data.data.token),
						sessionStorage.setItem("userId", res.data.data.userId),
						sessionStorage.setItem("userName", res.data.data.userName),
						sessionStorage.setItem("userTel", res.data.data.userTel)
					this.$router.push("/home")
				} else {
					Notify({ type: "danger", message: "登录失败" })
				}
			})
		},
		// 二次密码验证
		validator(val) {
			return val == this.password ? true : false
		},
	}
}
</script>
  
<style scoped>
.head {
	width: 100%;
	font-size: 0.16rem;
	height: 1.5rem;
	color: black;
	position: relative;
}

.head span {
	font-size: 0.19rem;
	display: inline-block;
	position: absolute;
	top: 0.68rem;
}

.head img {
	width: 15%;
	margin: 0.5rem 0.1rem 1rem;
}
</style>